<script setup>
</script>

<template>
  <div class="about-container">
    <el-card class="section-card">
      <h2>关于我们</h2>
      <p>
        首先感谢 <strong>桂林电子科技大学数学与计算科学学院</strong> 对本团队的培养，提供了这样一个平台。
        感谢 <strong>指导教师毛睿老师</strong> 的支持和指导，毛老师一直致力于推动创新实践项目的发展，
        本项目的启动与团队组建离不开毛老师的努力与付出。
      </p>
    </el-card>

    <el-card class="section-card">
      <h2>开发团队</h2>
      <p>
        我们是数学与计算科学学院创新实践基地的成员，本项目为一套学情管理系统，包含完整的前后端架构，
        当前页面为前端展示部分，项目仍在积极开发中。
      </p>
      <ul>
        <li><strong>项目负责人：</strong>石XX、覃XX</li>
        <li><strong>前端开发：</strong>曲XX</li>
        <li><strong>后端开发：</strong>程XX</li>
        <li><strong>数据处理：</strong>溪XX、周XX</li>
        <li><strong>数学建模：</strong>董XX、刁XX</li>
      </ul>
      <p>未来还会有更多优秀成员加入开发与维护工作。</p>
    </el-card>

    <el-card class="section-card">
      <h2>组织介绍</h2>
      <p><strong>数学与计算科学学院创新实践基地</strong></p>
      <blockquote>
        真实、专注、卓越、不设限、创新
      </blockquote>
      <p>
        创新基地以培养高素质复合型人才为目标，设有多个技术部门，开展多维度能力提升与实践。
      </p>
    </el-card>

    <el-card class="section-card">
      <h2>指导教师</h2>
      <p>毛睿老师、王会勇老师、徐增敏老师、唐敏老师 等。</p>
    </el-card>

    <el-card class="section-card">
      <h2>部门介绍</h2>

      <div class="dept">
        <h3>📌 算法部</h3>
        <p>
          以培养优秀的算法工程师为目标。夯实基础、掌握算法思想，提升逻辑建模与解决问题的能力，
          为算法竞赛和未来职业打下坚实基础。
        </p>
      </div>

      <div class="dept">
        <h3>📊 大数据部</h3>
        <p>
          致力于数据研发工程师培养，掌握数据挖掘、可视化、统计建模等关键技能，能处理复杂海量数据。
        </p>
      </div>

      <div class="dept">
        <h3>💻 软件部</h3>
        <p>
          专注于计算机技术应用，包括 Web 开发、移动端、云计算、DevOps 等领域，培养全面的开发能力。
        </p>
      </div>

      <div class="dept">
        <h3>🔐 信安部 <span class="note">(Is still alive??)</span></h3>
        <p>
          涉猎木马编程、网络渗透、逆向工程、CTF 等方向，致力于安全领域探索与实战应用。
        </p>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.about-container {
  padding: 30px 20px;
  background-color: #f0f4f8;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section-card {
  width: 100%;
  max-width: 900px;
  margin-bottom: 30px;
  padding: 20px 30px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.section-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

h2 {
  font-size: 22px;
  margin-bottom: 16px;
  color: #2c3e50;
  position: relative;
  padding-left: 30px;
}

h2::before {
  content: '📘';
  position: absolute;
  left: 0;
  top: 0;
  font-size: 20px;
}

h3 {
  margin: 16px 0 8px;
  color: #409eff;
  font-weight: 600;
}

ul {
  padding-left: 20px;
  margin-top: 5px;
}

ul li {
  margin-bottom: 6px;
  line-height: 1.6;
}

blockquote {
  font-style: italic;
  color: #555;
  margin: 10px 0;
  padding-left: 12px;
  border-left: 4px solid #a0cfff;
  background-color: #f0f9ff;
  border-radius: 4px;
}

.note {
  color: #aaa;
  font-size: 12px;
  margin-left: 4px;
}

</style>
